<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link th:href="@{static/semantic/semantic.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body data-th-style="'background:url(' + @{/static/image/340610.jpg} + '); background-repeat:no-repeat; background-attachment: fixed; background-size: cover;'">
<div style="height: 15%;width: 100%"></div>
    <div class="ui inverted red card" style="width: 700px;height: 550px;margin-left: auto;margin-right: auto;padding-top: 30px;padding-left: 30px;padding-right: 30px;display:none" id="loginDiv">
        <h2 class="ui header">欢迎来到我们的站点！ </h2>
        <div class="ui top attached tabular menu">
            <a class="item active" data-tab="first">账号登录</a>
            <a class="item" data-tab="second">用户注册</a>
        </div>

        <div class="ui bottom attached tab segment active" data-tab="first" style="height: 380px">
            <form class="ui form" action="/login" method="post">
                <div class="field">
                    <label>账号</label>
                    <input type="text" name="userAccount" placeholder="userAccount" />
                </div>
                <div class="field">
                    <label>密码</label>
                    <input type="text" name="userPassword" placeholder="userPassword" />
                </div>
                <div class="field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" name="public" />
                        <label>记住我</label>
                    </div>
                    <button class="ui right labeled icon purple button" type="submit" style="float: right"><i class="right arrow icon"></i> 登录 </button>
                    <!--<button class="ui primary button" type="submit" style="width:18%;margin-left: 63%">登录</button>-->
                </div>
                <div class="field" style="padding-top: 10px">
                    <a href="javascript:void(0);" >忘记密码？</a><a href="javascript:void(0);" style="margin-left: 30px">第三方登录</a>
                </div>
                <br>
                <div class="ui" data-th-attrappend="class=${' ' + cssStyle}"  data-th-if="${status}">
                    <i class="close icon"></i>
                    <div class="header">提示 </div>
                    <p  data-th-text="${message}"></p>
                </div>
            </form>
        </div>

        <div class="ui bottom attached tab segment" data-tab="second" style="height: 380px">
            <form class="ui form" action="/register" method="post">
                <div class="field">
                    <label>账号</label>
                    <input type="text" name="userAccount" placeholder="userAccount" />
                </div>
                <div class="field">
                    <label>密码</label>
                    <input type="text" name="userPassword" placeholder="userPassword" />
                </div>
                <div class="field">
                    <label>确认密码</label>
                    <input type="text" name="passwordConfirm" placeholder="confirm passWord" />
                </div>
                <div class="two fields">
                    <div class="field">
                        <label>昵称</label>
                        <input type="text" name="userName" placeholder="userName" />
                    </div>
                    <div class="field">
                        <label>签名</label>
                        <input type="text" name="userDescribe" placeholder="userDescribe" />
                    </div>
                </div>
                <button class="ui primary button" type="submit" style="width:18%;margin-left: 81%">提交</button>
            </form>
        </div>
    </div>

</body>
<script th:src="@{static/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{static/semantic/semantic.min.js}"></script>
<script th:src="@{static/chat/login.js}"></script>
</html>